<template>
  <d2-container>
    <el-button type="success" icon="el-icon-plus" @click="dialogFormVisible = true">添加用户</el-button>
    <el-dialog v-bind="$attrs" v-on="$listeners" @open="onOpen" @close="onClose" title="Dialog Titile" :visible.sync="dialogFormVisible">
  <el-form ref="addUserForm" :model="addUserFormData" :rules="addUserRules" size="medium" label-width="100px">
    <el-row>
      <el-col :span="16">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="addUserFormData.username" placeholder="请输入用户名" clearable
            prefix-icon='el-icon-user' :style="{width: '100%'}"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="16">
        <el-form-item label="密码" prop="password">
          <el-input v-model="addUserFormData.password" placeholder="请输入密码" clearable prefix-icon='el-icon-key'
            show-password :style="{width: '100%'}"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
  <div slot="footer">
    <el-button @click="close">取消</el-button>
    <el-button type="primary" @click="handelConfirm">确定</el-button>
  </div>
</el-dialog>
  </d2-container>

</template>
<script>
export default {
  name: 'user_dialog',
  inheritAttrs: false,
  components: {},
  props: [],
  data () {
    return {
      dialogFormVisible: false,
      addUserFormData: {
        username: undefined,
        password: undefined
      },
      addUserRules: {
        username: [{
          required: true,
          message: '请输入用户名',
          trigger: 'blur'
        }],
        password: [{
          required: true,
          message: '请输入密码',
          trigger: 'blur'
        }]
      }
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
    onOpen () {},
    onClose () {
      // 关闭弹窗后执行的方法
      this.$refs.addUserForm.resetFields()
    },
    close () {
      // this.$emit('update:visible', false)
      // 点击取消执行的方法
      this.dialogFormVisible = false
    },
    handelConfirm () {
      this.$refs.addUserForm.validate(valid => {
        if (!valid) return
        this.close()
      })
    }
  }
}

</script>
